<template>
    <div id="deposit" class="order-content">
        <div class="top" style="width: 100%; overflow: auto">
            <el-row class="row-height top-row" style="border-bottom: 1px solid #c9c9c9">
                <el-col :span="8" class="col-box" style="border-right: 1px solid #c9c9c9">
                    <h3 class="title">风控指令:<el-divider></el-divider></h3>
                    <el-form label-width="110px" size="small">
                        <el-row class="form-row">
                            <el-col>
                                <el-form-item label="外部指令序号:"
                                    ><el-input :value="riskOrderForm.outerOrderCode" disabled size="mini"></el-input
                                ></el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="产品序号:">
                                    <RiskEntryInput @set-entry-data="getEntryslist" :returnDatas="riskOrderForm.fundCode" />
                                    <!-- <el-select v-model="riskOrderForm.fundCode" filterable @change="handleFundCodeChange" size="mini">
                                        <el-option
                                            v-for="i in fundCodeSelectData"
                                            :key="i.fundCode"
                                            :label="i.fundCode + ' ' + i.fundNameSt"
                                            :value="i.fundCode"
                                        >
                                        </el-option>
                                    </el-select> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="组合编码:">
                                    <el-select v-model="riskOrderForm.fundAccountCode" size="mini">
                                        <el-option
                                            v-for="i in computedFundAccountCodeSelectData"
                                            :key="i.fundAccountCode"
                                            :label="i.fundAccountCode + ' ' + i.fundAccountName"
                                            :value="i.fundAccountCode"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="订单方向:">
                                    <el-select v-model="riskOrderForm.orderDirection" size="mini">
                                        <el-option
                                            v-for="i in orderDirectionSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="指令用途:">
                                    <el-select v-model="riskOrderForm.orderPurpose" size="mini">
                                        <el-option
                                            v-for="i in orderPurposeSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="存款利率:"
                                    ><el-input-number
                                        v-model="riskOrderForm.depositRate"
                                        :precision="2"
                                        :min="0"
                                        controls-position="right"
                                        size="mini"
                                    ></el-input-number
                                ></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="指令优先级:">
                                    <el-select v-model="riskOrderForm.orderLevel" size="mini">
                                        <el-option
                                            v-for="i in orderLevelSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="指令金额:">
                                    <el-tooltip
                                        v-if="riskOrderForm.orderBalance && riskOrderForm.orderBalance !== 'NaN'"
                                        placement="top"
                                        :content="computedorderBalanceChinese"
                                    >
                                        <RiskInputNumber
                                            :maxlength="15"
                                            :inputAfter="'元'"
                                            :input="riskOrderForm.orderBalance"
                                            :field="'orderBalance'"
                                            @getInputNumber="getInputNumber(arguments)"
                                            :precision="2"
                                            :min="0"
                                            controls-position="right"
                                            size="mini"
                                        />
                                    </el-tooltip>
                                    <RiskInputNumber
                                        :maxlength="15"
                                        :inputAfter="'元'"
                                        v-else
                                        :input="riskOrderForm.orderBalance"
                                        :field="'orderBalance'"
                                        @getInputNumber="getInputNumber(arguments)"
                                        :precision="2"
                                        :min="0"
                                        controls-position="right"
                                        size="mini"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row class="form-row">
                            <el-col>
                                <el-form-item label="银行序号:">
                                    <el-select
                                        v-model="riskOrderForm.bankCode"
                                        filterable
                                        remote
                                        :remote-method="searchBankCodeList"
                                        :loading="selectLoading"
                                        @change="handleChangeValue"
                                        style="width: 100%"
                                        size="mini"
                                    >
                                        <el-option
                                            v-for="i in bankCodeSelectData"
                                            :key="i.bankCode"
                                            :label="i.bankCode + ' ' + i.bankName"
                                            :value="i.bankCode"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="存款类型:">
                                    <el-select v-model="riskOrderForm.depositType" size="mini" @change="riskOrderForm.noticeType = ''">
                                        <el-option
                                            v-for="i in depositTypeSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="支取限制:">
                                    <el-select v-model="riskOrderForm.advanceLimitFlag" size="mini">
                                        <el-option
                                            v-for="i in advanceLimitFlagSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="通知存款类型:">
                                    <el-select
                                        v-model="riskOrderForm.noticeType"
                                        :disabled="riskOrderForm.depositType !== '2'"
                                        size="mini"
                                        @change="handleNoticeTypeChange"
                                    >
                                        <el-option
                                            v-for="i in noticeTypeSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="通知天数:">
                                    <el-input-number
                                        :disabled="riskOrderForm.depositType !== '2'"
                                        v-model="riskOrderForm.noticeDays"
                                        :min="0"
                                        controls-position="right"
                                        size="mini"
                                    ></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="到期类型:">
                                    <el-select v-model="riskOrderForm.mutureType" size="mini">
                                        <el-option
                                            v-for="i in mutureTypeSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="存款期限(天):"
                                    ><el-input-number
                                        v-model="riskOrderForm.depositLimitTime"
                                        :min="0"
                                        controls-position="right"
                                        size="mini"
                                        @change="getMutureDate"
                                    ></el-input-number
                                ></el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="计息开始日:"
                                    ><el-date-picker
                                        v-model="riskOrderForm.depositStartDate"
                                        type="date"
                                        format="yyyyMMdd"
                                        value-format="yyyyMMdd"
                                        style="width: 120px"
                                    ></el-date-picker
                                ></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="到期日:"
                                    ><el-date-picker
                                        v-model="riskOrderForm.mutureDate"
                                        type="date"
                                        format="yyyyMMdd"
                                        value-format="yyyyMMdd"
                                        :disabled="riskOrderForm.depositType == '2'"
                                        style="width: 120px"
                                    ></el-date-picker
                                ></el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="银行账号:"
                                    ><el-input v-model="riskOrderForm.depositAccountNo" size="mini"></el-input
                                ></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="合同序号:"><el-input v-model="riskOrderForm.contractCode" size="mini"></el-input></el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="银行分行:"
                                    ><el-input v-model="riskOrderForm.bankBranchCode" size="mini"></el-input
                                ></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="撤单类型:">
                                    <el-select v-model="riskOrderForm.cancelType" size="mini">
                                        <el-option
                                            v-for="i in cancelTypeSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row">
                            <el-col>
                                <el-form-item label="备注:"><el-input v-model="riskOrderForm.remark" size="mini"></el-input></el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row" style="float: right">
                            <el-select style="width: 150px; margin-right: 10px" v-model="riskOrderForm.directMode" size="mini">
                                <el-option label="从严控制" value="0"></el-option>
                                <el-option label="非从严控制" value="1"></el-option>
                            </el-select>
                            <el-button v-authCode="B_0039" @click="handleClickButtonReset" size="mini">重置</el-button>
                            <el-button v-authCode="B_0041" @click="handleSubmit('1')" type="primary" size="mini">试算</el-button>
                            <el-button v-authCode="B_0040" @click="handleSubmit('2')" type="primary" size="mini">下单</el-button>
                        </el-row>
                    </el-form>
                </el-col>
                <el-col :span="16" class="col-box security-box">
                    <h3 class="title" style="margin-top: 6px">在途存款:<el-divider></el-divider></h3>
                    <risk-table :msg="positionsListMsg" @getList="getPositionList"></risk-table>
                </el-col>
            </el-row>
        </div>
        <el-row class="row-height bottom-row">
            <el-col class="col-box">
                <h3 class="title">
                    <el-row>
                        <el-col :span="3">风控结果:<status-tag :code="riskResult"></status-tag></el-col>
                        <el-col :span="5">
                            <span>试算/下单时间: </span>
                            <span style="color: red">{{ calcTime }}</span>
                        </el-col>
                        <el-col :span="5">
                            <span>计算耗时: </span>
                            <span style="color: red">{{ takeTime }}</span>
                        </el-col>
                        <el-col :span="4"
                            >条目检查数: <span v-show="resultData.length" style="color: red">{{ resultData.length }}</span></el-col
                        >
                    </el-row>
                    <el-divider></el-divider>
                </h3>
                <vxe-table
                    v-if="tableKey"
                    :data="riskResListMsg.returnData.data"
                    :column-config="{ isHover: true }"
                    :row-config="{ isHover: true }"
                    :sort-config="{ trigger: 'cell', defaultSort: { field: 'thresholdType', order: 'desc' }, orders: ['desc', 'asc', null] }"
                    border
                    size="mini"
                    style="width: 100%"
                    max-height="400px"
                    header-align="center"
                    show-overflow
                >
                    <vxe-column field="fundCode" title="产品代码" sortable width="120" :filters="[{ data: '' }]" :filter-method="filterHandler">
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="fundNameSt"
                        title="产品名称"
                        width="120"
                        show-overflow
                        :filters="[{ data: '' }]"
                        :filter-method="filterHandler"
                    >
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                    </vxe-column>

                    <vxe-column
                        field="assetCode"
                        title="资产单元编号"
                        sortable
                        width="160"
                        :filters="[{ data: '' }]"
                        :filter-method="filterHandler"
                        v-if="SHOW_SECURITY"
                    >
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                        <template slot-scope="scope">
                            <span>{{ scope.row.assetCode || '--' }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="assetName"
                        title="资产单元名称"
                        width="160"
                        :filters="[{ data: '' }]"
                        :filter-method="filterHandler"
                        v-if="SHOW_SECURITY"
                    >
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                        <template slot-scope="scope">
                            <span>{{ scope.row.assetName || '--' }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="fundAccountCode"
                        title="组合编码"
                        sortable
                        width="120"
                        :filters="[{ data: '' }]"
                        :filter-method="filterHandler"
                        v-if="SHOW_SECURITY"
                    >
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                        <template slot-scope="scope">
                            <span>{{ scope.row.fundAccountCode || '--' }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="fundAccountName"
                        title="组合名称"
                        width="120"
                        show-overflow
                        :filters="[{ data: '' }]"
                        :filter-method="filterHandler"
                        v-if="SHOW_SECURITY"
                    >
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                        <template slot-scope="scope">
                            <span>{{ scope.row.fundAccountName || '--' }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="bankCode"
                        title="银行序号"
                        sortable
                        show-overflow
                        width="150"
                        :filters="[{ data: '' }]"
                        :filter-method="filterHandler"
                    >
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                    </vxe-column>
                    <vxe-column field="bankName" title="银行名称" show-overflow width="150" :filters="[{ data: '' }]" :filter-method="filterHandler">
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="entryCode"
                        title="条目编号"
                        show-overflow
                        sortable
                        width="120"
                        :filters="[{ data: '' }]"
                        :filter-method="filterHandler"
                    >
                        <template #filter="{ $panel, column }">
                            <el-input
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </template>
                    </vxe-column>
                    <vxe-column field="entryName" title="风险说明" show-overflow :filters="[{ data: '' }]" :filter-method="filterHandler" width="130">
                        <template #filter="{ $panel, column }">
                            <div>
                                <el-input
                                    class="my-input"
                                    type="type"
                                    v-for="(option, index) in column.filters"
                                    :key="index"
                                    v-model="option.data"
                                    @input="$panel.changeOption($event, !!option.data, option)"
                                />
                            </div>
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="entryType"
                        title="风险类型"
                        show-overflow
                        width="110"
                        :filters="entryTypeArr"
                        :filter-method="filterEntryTypeMethod"
                    >
                        <template slot-scope="scope">
                            <span>{{ entryType[scope.row.entryType] }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="thresholdValue" title="风控阈值" show-overflow width="110">
                        <template slot-scope="scope">
                            <span style="float: right">{{
                                scope.row.thresholdValue != undefined
                                    ? numberFormat(scope.row.thresholdValue, scope.row.unit) + unitShow(scope.row.unit)
                                    : '--'
                            }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="compareType2" title="比较方向" show-overflow width="110"> </vxe-column>
                    <vxe-column field="calculateValue" title="计算结果(单位)" show-overflow width="120">
                        <template slot-scope="scope">
                            <span style="float: right">{{
                                    this.WEB_DOCKING === 'CIBFUND' && scope.row.calculateValue != undefined ? numberFormatXDAY(scope.row.calculateValue, scope.row.unit) + unitShow(scope.row.unit) :
                                scope.row.calculateValue != undefined
                                    ? numberFormat(scope.row.calculateValue, scope.row.unit) + unitShow(scope.row.unit)
                                    : '--'
                            }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="thresholdType"
                        title="阈值类型"
                        sortable
                        width="130"
                        :filters="ThresholdTypeArr"
                        :filter-method="filterThresholdType"
                    >
                        <!-- <template #filter="{ $panel, column }">
          <el-select
            class="my-select"
            v-model="option.data"
            v-for="(option, index) in column.filters"
            :key="index"
            @change="$panel.changeOption($event, !!option.data, option)"
          >
            <option v-for="(label, cIndex) in ThresholdTypeArr" :key="cIndex" :value="label">{{ label }}</option>
          </el-select>
        </template> -->
                        <template slot-scope="scope">
                            <status-tag :code="scope.row.thresholdType" />
                        </template>
                    </vxe-column>
                    <vxe-column field="investableBalance" title="可投余量" min-width="120">
                        <template slot-scope="scope">
                            <el-popover
                                v-if="getObjectLength(scope.row.investableBalance) && getObjectLength(scope.row.investableBalance) > 1"
                                placement="top"
                                trigger="hover"
                            >
                                <div style="padding: 0 10px 10px 0" slot v-for="(value, key, index) in scope.row.investableBalance" :key="key">
                                    {{ '阀值' + ++index + '可投余量: ' + scope.row['investableBalance']['INVESTABLE_BALANCE_' + index] }}
                                </div>
                                <el-tag slot="reference">{{ getObjectLength(scope.row.investableBalance) + '个可投余量' }}</el-tag>
                            </el-popover>
                            <span style="float: right" v-else v-for="(value, key) in scope.row.investableBalance" :key="key">{{ value }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="maxTradable" title="最大可交易量" min-width="120">
                        <template slot-scope="scope">
                            <el-popover
                                v-if="getObjectLength(scope.row.maxTradable) && getObjectLength(scope.row.maxTradable) > 1"
                                placement="top"
                                trigger="hover"
                            >
                                <div style="padding: 0 10px 10px 0" slot v-for="(value, key, index) in scope.row.maxTradable" :key="key">
                                    {{ '阀值' + ++index + '最大可交易量: ' + scope.row['maxTradable']['MAX_TRADABLE_' + index] }}
                                </div>
                                <el-tag slot="reference">{{ getObjectLength(scope.row.maxTradable) + '最大可交易量' }}</el-tag>
                            </el-popover>
                            <span style="float: right" v-else v-for="(value, key) in scope.row.maxTradable" :key="key">{{ value }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="maxTradableMerge" title="最大可交易量(汇总)" min-width="120">
                        <template slot-scope="scope">
                            <el-popover
                                v-if="getObjectLength(scope.row.maxTradableMerge) && getObjectLength(scope.row.maxTradableMerge) > 1"
                                placement="top"
                                trigger="hover"
                            >
                                <div style="padding: 0 10px 10px 0" slot v-for="(value, key, index) in scope.row.maxTradableMerge" :key="key">
                                    {{ '阀值' + ++index + '最大可交易量(汇总): ' + scope.row['maxTradableMerge']['MAX_TRADABLE_' + index] }}
                                </div>
                                <el-tag slot="reference">{{ getObjectLength(scope.row.maxTradableMerge) + '最大可交易量汇总' }}</el-tag>
                            </el-popover>
                            <span v-else v-for="(value, key) in scope.row.maxTradableMerge" :key="key">{{ value }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="entryKey" title="静态条目KEY" show-overflow width="120"> </vxe-column>
                    <vxe-column field="branchNum" title="分支详情" show-overflow width="120">
                        <template slot-scope="scope">
                            <branch-tag :data="scope.row" />
                        </template>
                    </vxe-column>
                </vxe-table>
                <div class="block" v-if="riskResListMsg.returnData.data.length">
                    <el-pagination
                        background
                        @current-change="currentChange"
                        layout="total, prev, pager, next"
                        :total="page.total"
                        :page-size="page.pageSize"
                        :current-page.sync="page.currentPage"
                    >
                    </el-pagination>
                </div>
                <!-- <risk-table :msg="riskResListMsg"></risk-table> -->
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table.vue';
import { SGU_CACHE, objToArr } from '@/utils/diction-const-util';
import Invest from '@/common/dict/invest';
import { UUID, NumberToWords, getCurrentPageData, numberFormat, unitShow, getConfigItem, numberFormatXDAY } from '@/utils/tools';
import StatusTag from './components/status-tag.vue';
import BranchTag from './components/branch-tag.vue';
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import { getUser } from '@/utils/user-util';

import XEUtils from 'xe-utils';
import RiskInputNumber from '@/pages/risk-measure/components/risk-input-number.vue';
import MeasureColumnUtil from './utils/measure-columns-util';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'Deposit',
    components: { RiskTable, StatusTag, BranchTag, RiskEntryInput, RiskInputNumber },
})
export default class Deposit extends Vue {
    numberFormat = numberFormat;
    unitShow = unitShow;
    numberFormatXDAY = numberFormatXDAY;
    WEB_DOCKING = getConfigItem('WEB_DOCKING');
    // 风控指令表单
    riskOrderForm = {
        outerOrderCode: '自动生成',
        fundCode: '',
        fundAccountCode: '',
        orderDirection: 'F',
        orderPurpose: '1',
        orderUser: getUser().userCode, // 下单人 条目权限需要传code进行判断
        depositRate: '',
        orderLevel: '1',
        orderBalance: null,
        orderType: '',
        investType: '',
        orderPriceType: '1',
        remark: '',
        contractCode: '',
        bankCode: '',
        depositAccountNo: '',
        depositStartDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
        mutureDate: '',
        mutureType: '1',
        advanceLimitFlag: '1',
        depositLimitTime: '',
        depositType: '1',
        bankBranchCode: '',
        cancelType: '3',
        noticeDays: '', // 通知天数
        noticeType: '',
        directMode: '0',
        marketCode: '',
        requestId: '',
    };
    tableKey: number = 0;
    // 图标dom
    iconDom: any = null;
    bankInfoPojo: any = {};

    Invest: any = new Invest();
    fundCodeSelectData: any[] = []; // 产品序号下拉框数据

    fundAccountCodeSelectData: any[] = []; // 组合编码下拉框数据

    investPriceSelectData: any[] = []; // 价格模式下拉框数据

    investTypeSelectData: any[] = []; // 投资类型下拉框数据

    orderPurposeSelectData: any[] = []; // 指令用途下拉框数据

    orderLevelSelectData: any[] = []; // 指令优先级下拉框数据

    depositTypeSelectData: any[] = []; // 存款类型下拉数据

    advanceLimitFlagSelectData: any[] = []; // 支取类型下拉数据

    noticeTypeSelectData: any[] = []; // 通知存款类型下拉数据

    mutureTypeSelectData: any[] = []; // 到期期限下拉数据

    bankCodeSelectData: any[] = []; // 银行序号下拉框数据

    allStockType: any[] = []; // 所有订单方向数据

    allOrderDirection: any[] = [];

    orderDirectionSelectData: any[] = []; // 订单方向下拉框数据

    cancelTypeSelectData: any[] = []; // 撤单类型下拉框数据

    selectLoading: boolean = false; // 下拉框远程搜索时的加载状态

    settleTypeSelectData: any[] = []; // 结算方式下拉框数据

    feeTypeSelectData: any[] = []; // 手续费方式下拉框数据

    calcTime: string = ''; // 下单/试算时间

    takeTime: string | number = ''; // 计算耗时

    riskResult: string | number = ''; // 风控结果

    entryType = {}; // 风险类型字典

    compareDirection = {}; // 比较方向字典

    entryTypeArr: any[] = [];
    ThresholdTypeArr: any[] = [];

    page: pages = {
        total: 0,
        pageSize: 5,
        currentPage: 1,
    };

    // 证券代码下拉框数据相关
    stockCodeMsg = {
        url: '/original/stock/list',
        submit: {
            paging: { total: 0, currentPage: 1, totalPage: 0, pageSize: 20 },
        },
    };

    // 证券信息相关
    stockMessageMsg = { url: '/baseInfomation/stockCode/', returnData: {} };

    // 在途存款相关
    positionsListMsg = {
        url: '/baseInfomation/deposit/stocks/',
        returnData: { data: [], total: 0 },
        dataKey: 'data',
        title: new MeasureColumnUtil().depositPositionColumns,
        height: '250px',
        // 隐藏页码
        hidePage: false,
        checked: { on: false, option: false },
    };
    // 风控结果相关
    riskResListMsg = {
        url: '/dataEngine/order/cashOrder',
        returnData: { data: [] },
        dataKey: 'data',
        title: [
            { name: '产品代码', val: 'fundCode', width: 120, sortable: true, search: true, filters: [{ data: '' }] },
            { name: '产品名称', val: 'fundNameSt', width: 120, search: true, filters: [{ data: '' }] },
            { name: '银行序号', val: 'bankCode', width: 120, sortable: true, search: true, filters: [{ data: '' }] },
            { name: '银行名称', val: 'bankName', width: 120, search: true, filters: [{ data: '' }] },
            { name: '条目编号', val: 'entryCode', width: 120, sortable: true, search: true, filters: [{ data: '' }] },
            { name: '风险说明', val: 'entryName', width: 200, search: true, filters: [{ data: '' }] },
            { name: '风险类型', val: 'entryType2', width: 100, filters: objToArr(this.Invest.entryType) },
            {
                name: '风控阈值',
                val: 'thresholdValue',
                width: 100,
                type: 'func',
                funcBody: (value, record) => (value != undefined ? numberFormat(value, record.unit) + unitShow(record.unit) : '--'),
            },
            { name: '比较方向', val: 'compareType2', width: 100 },
            {
                name: '计算结果(单位)',
                val: 'calculateValue',
                width: 150,
                type: 'func',
                funcBody: (value, record) => (this.WEB_DOCKING === 'CIBFUND' && value != undefined ? numberFormatXDAY(value, record.unit) + unitShow(record.unit) : value != undefined ? numberFormat(value, record.unit) + unitShow(record.unit) : '--'),
            },
            { name: '阈值类型', val: 'thresholdType', type: 'statusTag', width: 120, sortable: true, filters: objToArr(this.Invest.ThresholdType) },
            { name: '可投余量', val: 'investableBalance', width: 110 },
            { name: '最大可交易量', val: 'maxTradable', width: 120 },
            { name: '最大可交易量(汇总)', val: 'maxTradableMerge', width: 130 },
            { name: '静态条目KEY', val: 'entryKey', width: 110 },
            { name: '分支详情', val: 'branchNum', type: 'branchTag', width: 110 },
        ],
        height: '350px',
        // 隐藏页码
        hidePage: true,
        checked: { on: false, option: false },
    };
    resultData: any[] = [];

    async mounted() {
        // 获取产品信息 (产品序号下拉框数据)
        this.fundCodeSelectData = await SGU_CACHE('FundInfo', '/fundInfo/list', []);
        // 获取组合编码下拉框数据
        let arr = await SGU_CACHE('FundAccount', '/fundInfo/accounts', []);
        arr.forEach(item => {
            this.fundAccountCodeSelectData[item.fundCode] = item.fundAccounts;
        });
        // 获取价格模式下拉框数据
        this.investPriceSelectData = await SGU_CACHE('PriceType', '/dict/list/code/Y_000237', []);
        // 获取投资类型下拉框数据
        this.investTypeSelectData = objToArr(this.Invest.investType);
        // 获取指令用途下拉框数据
        this.orderPurposeSelectData = objToArr(Invest.investPurpose);
        // 获取指令优先级下拉框数据
        this.orderLevelSelectData = objToArr(this.Invest.investLevel);
        // 获取存款类型下拉数据
        this.depositTypeSelectData = objToArr(this.Invest.depositType);
        // 获取支取类型下拉数据
        this.advanceLimitFlagSelectData = objToArr(this.Invest.advanceLimitFlag);
        // 获取通知存款类型下拉数据
        this.noticeTypeSelectData = objToArr(this.Invest.noticeType);
        // 获取到期期限下拉数据
        this.mutureTypeSelectData = objToArr(this.Invest.mutureType);

        // 获取所有证券类别 (用于筛选订单方向)
        this.allStockType = await SGU_CACHE('StockType', '/dict/stockType/list', []);
        // 获取所有订单方向
        this.allOrderDirection = await SGU_CACHE('TradeDirection', '/dict/tradeDirections', []);
        this.orderDirectionSelectData = this.allOrderDirection.filter(item => ['F', 'i'].includes(item.dictKey));

        // 获取撤单类型下拉框数据
        this.cancelTypeSelectData = objToArr(this.Invest.CancelType);
        // 获取风险类型字典
        this.entryType = this.Invest.entryType;
        // 获取比较方向字典
        this.compareDirection = this.Invest.CompareDirection;
        // 获取结算方式下拉框数据
        this.settleTypeSelectData = objToArr(this.Invest.settleType);
        // 获取手续费方式
        this.feeTypeSelectData = objToArr(this.Invest.feeType);

        this.entryTypeArr = this.objToArr(this.Invest.entryType);
        this.ThresholdTypeArr = this.objToArr(this.Invest.ThresholdType);
        this.getBankList('');
        this.changeTable();
        this.tableKey++;
    }

    // 转表格筛选下拉框数据
    objToArr(param) {
        let list = [];
        for (let key in param) {
            list.push({ label: param[key], value: key });
        }
        return list;
    }

    // 获取对象长度
    getObjectLength(obj: any) {
        if (obj) {
            return Object.keys(obj).length;
        } else {
            return 0;
        }
    }

    getInputNumber(args: any) {
        let value = args[0];
        let field = args[1];
        this.riskOrderForm[field] = value;
    }

    currentChange(val: number): void {
        this.page.total = this.resultData.length;
        this.page.currentPage = val;
        this.riskResListMsg.returnData.data = getCurrentPageData(this.resultData, this.page.currentPage, this.page.pageSize);
    }
    SHOW_SECURITY = getConfigItem('SHOW_SECURITY');
    changeTable() {
        this.$nextTick(() => {
            if (!this.iconDom) {
                this.iconDom = document.querySelectorAll('.vxe-icon--funnel');
                let count = this.SHOW_SECURITY ? 10 : 6;
                for (let i = 0; i < count; i++) {
                    this.iconDom[i].className = 'vxe-filter--btn el-icon-search';
                }
            }
        });
    }

    filterThresholdType({ value, row, column }) {
        return row.thresholdType == value;
    }

    filterEntryTypeMethod({ value, row, column }) {
        return row.entryType == value;
    }

    // 表格列筛选数据
    filterHandler({ option, row, column }) {
        const property = column['property'];
        return row[property].includes(option.data);
    }
    // 组合编码下拉框计算属性
    get computedFundAccountCodeSelectData() {
        return this.fundAccountCodeSelectData[this.riskOrderForm.fundCode] || [];
    }

    handleChangeValue(e) {
        let st = this.bankCodeSelectData.find(item => item.bankCode === e);
        this.bankInfoPojo[e] = st.bankName;
    }

    // 监听 组合编码计算属性 (每当计算属性变动时 自动选中第一项)
    @Watch('computedFundAccountCodeSelectData', { immediate: true, deep: true })
    watchcomputedFundAccountCode(newData) {
        if (newData && newData.length) {
            this.riskOrderForm.fundAccountCode = newData[0].fundAccountCode;
        }
    }

    // 获取银行序号下拉框数据
    getBankList(e) {
        this.selectLoading = true;
        this.$axios
            .post('/baseInfomation/bank/list', {
                bankCode: e,
                paging: {
                    currentPage: 1,
                    pageSize: 20,
                },
            })
            .then((res: any) => {
                this.bankCodeSelectData = res.list || [];
                this.selectLoading = false;
            });
    }

    handleNoticeTypeChange(e) {
        if (e === '2') {
            this.riskOrderForm.mutureDate = '';
        }
    }

    getMutureDate() {
        let dateTime = new Date();
        let date: number;
        if (this.riskOrderForm.noticeType !== '2') {
            date = dateTime.setDate(dateTime.getDate() + parseInt(this.riskOrderForm.depositLimitTime));
            dateTime = new Date(dateTime);
            this.riskOrderForm.mutureDate = XEUtils.toDateString(dateTime, 'yyyyMMdd');
        }
    }

    // 指令金额 大写中文
    get computedorderBalanceChinese() {
        return NumberToWords(this.riskOrderForm.orderBalance);
    }

    // 重置按钮点击事件
    handleClickButtonReset() {
        this.riskOrderForm = {
            outerOrderCode: '自动生成',
            fundCode: '',
            fundAccountCode: '',
            orderDirection: 'F',
            orderPurpose: '1',
            orderUser: getUser().userCode,
            depositRate: '',
            orderLevel: '1',
            orderBalance: null,
            orderType: '',
            investType: '',
            orderPriceType: '1',
            remark: '',
            contractCode: '',
            bankCode: '',
            depositAccountNo: '',
            depositStartDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
            mutureDate: '',
            mutureType: '1',
            advanceLimitFlag: '1',
            depositLimitTime: '',
            depositType: '1',
            bankBranchCode: '',
            cancelType: '3',
            noticeDays: '', // 通知天数
            noticeType: '',
            directMode: '0',
            marketCode: '',
            requestId: '',
        };
        this.stockMessageMsg.returnData = {};
        this.positionsListMsg.returnData.data = [];
        this.positionsListMsg.returnData.total = 0;
    }

    getEntryslist(val: any) {
        this.riskOrderForm.fundCode = val;
        this.handleFundCodeChange(val);
    }
    fundInfo: any = {};
    positionList: any = [];
    // 产品序号选中事件 => 请求持仓信息
    handleFundCodeChange(e: string) {
        if (e) {
            this.$axios(this.positionsListMsg.url + e).then(async (res: any) => {
                let data = [];
                if (res.length) {
                    await this.handleFundInfo(e);
                    data = res.map(item => {
                        item.fundNameSt = this.fundInfo.fundNameSt;
                        return item;
                    });
                }
                this.positionList = data;
                this.getPositionList({
                    currentPage: 1,
                    pageSize: 25,
                });
            });
        } else {
            this.positionList = [];
            this.positionsListMsg.returnData.data = [];
            this.positionsListMsg.returnData.total = 0;
        }
    }

    async handleFundInfo(val: string) {
        return this.$axios
            .get('/fundInfo/list/byUser/like?fundCodeOrName=' + encodeURIComponent(val))
            .then((res: any) => {
                this.fundInfo = res.find(item => item.fundCode == val) || {};
                console.log(this.fundInfo, 'this.fundInfo');
            })
            .catch(err => {
                console.log(err);
            });
    }

    getPositionList(pages) {
        this.positionsListMsg.returnData.data = getCurrentPageData(this.positionList, pages.currentPage, pages.pageSize);
        this.positionsListMsg.returnData.total = this.positionList.length;
    }

    // 校验提交参数
    verifyInstructionParam() {
        let param = this.riskOrderForm;
        if (!param.orderType) {
            this.yh_message_error('下单类型不可为空');
            return false;
        }
        if (!param.outerOrderCode) {
            this.yh_message_error('外部下单序号不可为空');
            return false;
        }
        if (!param.fundCode) {
            this.yh_message_error('产品代码不可为空');
            return false;
        }
        if (!param.fundAccountCode) {
            this.yh_message_error('组合编码不可为空');
            return false;
        }
        if (!param.orderUser) {
            this.yh_message_error('下单人不可为空');
            return false;
        }
        if (!param.marketCode) {
            this.yh_message_error('市场序号不可为空');
            return false;
        }
        if (!param.orderDirection) {
            this.yh_message_error('订单方向不可为空');
            return false;
        }
        if (!param.orderBalance && param.orderBalance !== 0) {
            this.yh_message_error('指令金额不可为空');
            return false;
        }
        if (!param.orderLevel) {
            this.yh_message_error('指令优先级不可为空');
            return false;
        }
        if (!param.bankCode) {
            this.yh_message_error('银行总行不可为空');
            return false;
        }
        if (!param.depositStartDate) {
            this.yh_message_error('起息日不可为空');
            return false;
        }
        if (param.depositType === '2' && param.noticeType === '1' && !param.noticeDays) {
            this.yh_message_error('通知天数不可为空');
            return false;
        }

        if (!param.mutureDate && param.noticeType !== '1') {
            this.yh_message_error('到期日不可为空');
            return false;
        }
        if (!param.depositLimitTime) {
            this.yh_message_error('存款期限不可为空');
            return false;
        }
        if (!param.depositRate) {
            this.yh_message_error('存款利率不可为空');
            return false;
        }
        if (!param.depositType) {
            this.yh_message_error('存款类型不可为空');
            return false;
        }
        return true;
    }

    // 提交事件
    handleSubmit(orderType: string) {
        // 下单类型
        this.riskOrderForm.orderType = orderType;

        // 计算耗时
        let start = window.performance.now();
        // 下单号
        this.riskOrderForm.outerOrderCode = 'bd' + UUID() + '-' + new Date().getTime();
        // 请求id
        this.riskOrderForm.requestId = 'rbd' + UUID() + '-' + new Date().getTime();

        // 下单人姓名
        // this.riskOrderForm.orderUser = getUser().userName;
        this.riskOrderForm.marketCode = '6';
        // 校验参数规则
        if (!this.verifyInstructionParam()) {
            return;
        }
        // 获取当前提交时间 (试算/下单时间)
        // 补零
        let fillZero = n => {
            let result = n.toString().length === 1 ? '0' + n : n;
            return result;
        };
        // 时间戳转换 yyyy-MM-dd
        let formatTime = (t = new Date()) => {
            let d = new Date(t);
            let year = d.getFullYear();
            let month = d.getMonth() + 1;
            let date = d.getDate();
            let hours = d.getHours();
            let minutes = d.getMinutes();
            let seconds = d.getSeconds();
            let result = `${year}-${fillZero(month)}-${fillZero(date)} ${fillZero(hours)}:${fillZero(minutes)}:${fillZero(seconds)}`;
            return result;
        };
        this.calcTime = formatTime(new Date());
        // 提交指令 => 获取风控结果
        let riskOrderForm = this.riskOrderForm;
        // 存款指令：investType传1或不传，不能传空
        if (!riskOrderForm.investType) {
            riskOrderForm.investType = '1';
        }
        this.$axios.post(this.riskResListMsg.url, riskOrderForm).then((res: any) => {
            this.yh_message_success('指令信息提交成功');
            // 风控结果
            this.riskResult = res.thresholdType;
            // 计算耗时
            let end = window.performance.now();
            this.takeTime = ((end - start) / 1000).toFixed(3) + '秒';

            let data = res.resultList || [];

            // 根据产品代码 匹配产品名称
            data.forEach(ele => {
                ele.requestId = res.requestId;
                // 风险类型
                ele.entryType2 = this.entryType[ele.entryType];
                // 比较方向
                ele.compareType2 = this.compareDirection[ele.compareType];

                for (let i = 0; i < this.fundCodeSelectData.length; i++) {
                    const item = this.fundCodeSelectData[i];
                    if (ele.fundCode === item.fundCode) {
                        ele.fundNameSt = item.fundNameSt;
                    }
                }

                for (let i = 0; i < this.bankCodeSelectData.length; i++) {
                    const item = this.bankCodeSelectData[i];
                    if (ele.bankCode === item.bankCode) {
                        ele.bankName = item.bankName;
                    }
                }
                if (this.SHOW_SECURITY) {
                    let needObj =
                        (this.fundAccountCodeSelectData[ele.fundCode] || []).find(item => item.fundAccountCode === ele.fundAccountCode) || {};
                    ele.fundAccountName = needObj.fundAccountName;
                    ele.assetName = needObj.assetName;
                    ele.assetCode = needObj.assetCode;
                }
            });
            this.$set(this.riskResListMsg.returnData, 'data', data);
            this.resultData = data;
            this.currentChange(1);
        });
    }
}
</script>
<style lang="scss" scoped>
@import './style/measure';

#deposit {
    width: 100%;
    height: 100vh;
    min-height: 600px;
    min-width: 1200px;
    .row-height {
        // height: 50%;
        // min-height: 450px;
        .col-box {
            // height: 100%;
            padding: 10px 5px;
            .el-divider {
                margin: 0;
                margin-top: 5px;
            }
            .form-row {
                margin-top: 3px;
                .el-form-item--small {
                    margin: 0;
                    & /deep/ .el-form-item__label {
                        color: #575757;
                    }
                    & /deep/ .el-input__inner {
                        height: 28px;
                        line-height: 28px;
                    }
                }
            }
        }
        .security-box {
            .form-row {
                .el-form-item--small {
                    & /deep/ .el-input__inner {
                        background: #fff;
                        color: #575757;
                    }
                }
            }
        }
        /deep/.vxe-table {
            height: 150px;
            max-height: 350px;
        }
    }
}
</style>
